<script setup>
import { ref, onMounted } from 'vue'
import { getVillaService } from '@/apis/villa'
import CardContainer from '@/components/CardContainer.vue'

// 存储精选别墅信息
const villatList = ref([])

// 实现分页需要的参数
const pageSize = ref(4)
const page = ref(1)
const total = ref(null)

// 获取精选别墅需要的参数
const villaItem = ref({
  pageSize: pageSize.value,
  page: page.value
})

// 获取精选别墅信息
const getVillaInfo = async () => {
  const res = await getVillaService(villaItem.value)
  villatList.value = res.data.data.rows
  total.value = res.data.data.count
}

onMounted(() => {
  getVillaInfo()
})

// 处理页码变化
const handleCurrentChange = (newPage) => {
  villaItem.value.page = newPage
  getVillaInfo()
}

// 处理页面显示数据条数变化
const handleSizeChange = (newSize) => {
  villaItem.value.pageSize = newSize
  getVillaInfo()
}
</script>

<template>
  <div class="container">
    <div class="header"></div>
    <div class="content" v-if="villatList">
      <CardContainer
        class="card"
        v-for="item in villatList"
        :key="item.id"
        :title="item.title"
        @click="$router.push(`/detail/${item.id}`)"
      >
        <div class="card-middle">
          <img :src="item.image_url.interior_img[0].url" alt="" />
        </div>

        <template #footer>
          <div class="card-footer">
            <div class="intro">
              <p>{{ item.rent_type }}</p>
              <p>{{ item.room_count }}室{{ item.livingroom_count }}厅</p>
              <p>{{ Math.floor(item.room_area) }}平方米</p>
              <p>朝{{ item.room_direction }}</p>
            </div>
            <p>{{ item.resident }}-{{ item.address }}</p>
            <h2>{{ Math.floor(item.price) }}</h2>
            元/月
          </div>
        </template>
      </CardContainer>

      <el-row>
        <el-col :offset="8">
          <!-- 分页区域 -->
          <div class="pagination">
            <el-pagination
              background
              layout="jumper,total,sizes,prev,pager,next"
              :page-sizes="[2, 3, 5]"
              v-model:current-page="page"
              v-model:page-size="pageSize"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-empty v-else :image-size="200" />
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 80%;

  .header {
    width: auto;
    height: 650px;
    background: url('@/assets/images/villa.webp') no-repeat center center;
    background-size: cover;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;

    .card {
      width: 900px;
      height: auto;
      margin: 20px;
      border-radius: 20px;
      transition: box-shadow 0.5s ease;

      .card-middle {
        width: auto;
        height: 350px;
        display: flex;
        justify-content: center;

        img {
          padding: 0 150px;
          width: 100%;
          height: 100%;
        }
      }

      .card-footer {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #909399;

        .intro {
          display: flex;
          justify-content: space-around;
          align-items: center;

          p {
            font-size: 18px;
            margin: 5px;
          }
        }

        h2 {
          color: red;
          display: inline-block;
          font-size: 30px;
        }
      }

      &:hover {
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
      }
    }

    .pagination {
      margin: 40px;
    }
  }
}
</style>
